<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <META HTTP-EQUIV="pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
    <META HTTP-EQUIV="expires" CONTENT="0">
    <script type="text/javascript" src="../../js/commonCss.js"></script>
    <link rel="stylesheet" type="text/css" href="../../styles/common.css" />
</head>
<body>
<div class="definewidth">
    <button type="button" class="btn btn-success top-back" id="backbtn">返回</button>
    <div class="div-echart ">
        <div id="main" style="width: 60%;height:400px;" class="center-block">
        </div>
    </div>

</div>
<script src="../../js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="../../js/common.js"></script>
<script type="text/javascript" src="../../libs/bootstrap-3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../../js/echarts.min.js"></script>
<script type="text/javascript" src="../../js/formatTime.js"></script>

<script type="text/javascript">
    var projectId = getQueryString('id');
    var projectName = getQueryString('projectName');
    var orgId= getQueryString('orgId');
    var orgName= getQueryString('orgName') =='请选择' ? '全部' : getQueryString('orgName');
    var xAxisData = [];
    var actualListData = [];
    var estimateListData = [];
    $.ajax({
        type: "POST",
        url: ctx + "/costEstimate/charts",
        data:{
            projectId: projectId,
            orgId:orgId
        },
        success: function(data){
            if(data.code == 200){
                xAxisData = data.data.month;
                actualListData =  data.data.actualList;
                estimateListData = data.data.estimateList;
                setEchart('main')
            } else {
                alert(data.msg)
            }
        }
    });

    var setEchart = function (eleId) {
        var myChart = echarts.init(document.getElementById(eleId));
        var option = {
            title : {
                text: projectName+'\n'+ orgName +'人工成本趋势分析',
                subtext: '完工预算：'+ getQueryString('completionBudge') + '，完工估算：' + getQueryString('completionEstimate'),
                x:'center'/*,
                top:0*/
            },
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
                orient: 'vertical',
                left: 'right',
                data:['预估人工','实际人工']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    data : xAxisData,
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis : [
                {
                    name:'元',
                    type : 'value'
                }
            ],
            series : [
                {
                    name:'预估人工',
                    type:'bar',
                    itemStyle: {
                        normal:{
                            label:{
                                show: true,
                                position:'top',
                                formatter: '{c}' ,
                                textStyle:{
                                    color:'#000'
                                }
                            }

                        }
                    },
                    data:estimateListData
                },
                {
                    name:'实际人工',
                    type:'bar',
                    itemStyle: {
                        normal:{
                            label:{
                                show: true,
                                position:'top',
                                formatter: '{c}' ,
                                textStyle:{
                                    color:'#000'
                                }
                            }

                        }
                    },
                    data:actualListData
                }
            ]
        };
        myChart.setOption(option);
    }

    $("#backbtn").click(function () {
        top.topManager.openPage({
            id : getQueryString('parentPageId'),
            isClose : true
        });
    });
</script>
</body>
</html>